<script setup lang="ts">
import { ObjectUtil } from '@utils/object-util'
import lodash from '@utils/lodash'
import { Cell } from '@antv/x6'

const props = defineProps<{
  cell: Cell | any
}>()

watch(() => props.cell, function (nv, ov) {
  // 当切换节点时
  nv && nv.on('change:*', syncCell) && syncCell()
  ov && ov.off('change:*', syncCell)
})

const _cell = shallowRef(null)
onMounted(function () {
  syncCell()
  props.cell.on('change:*', syncCell)
})

onBeforeUnmount(function () {
  props.cell.off('change:*', syncCell)
})

// 同步数据
const syncCell = lodash.debounce(function () {
  const tempCell = ObjectUtil.copy(props.cell)
  const position = tempCell.position
  position.x = ~~(position.x)
  position.y = ~~(position.y)
  _cell.value = tempCell
}, 200)

// 宽高
const resizeHandle = () => {
  const size = _cell.value?.size
  props.cell.resize(size.width, size.height)
}
// 坐标
const positionHandle = () => {
  const { x, y } = _cell.value?.position
  props.cell.position(~~(x), ~~(y))
}
// 旋转
const rotateHandle = () => {
  const rotate = _cell.value?.angle
  props.cell.rotate(rotate, { absolute: true })
}

</script>

<template>
  <el-collapse-item v-if="_cell" title="基础属性" name="基础属性">
    <div class="attr-grid">
      <el-form-item label="宽">
        <el-input-number v-model="_cell.size.width" @change="resizeHandle" />
      </el-form-item>
      <el-form-item label="高">
        <el-input-number v-model="_cell.size.height" @change="resizeHandle" />
      </el-form-item>
      <el-form-item label="X">
        <el-input-number v-model="_cell.position.x" @change="positionHandle" />
      </el-form-item>
      <el-form-item label="Y">
        <el-input-number v-model="_cell.position.y" @change="positionHandle" />
      </el-form-item>
      <el-form-item label="角度">
        <el-input-number v-model="_cell.angle" @change="rotateHandle" />
      </el-form-item>
    </div>
  </el-collapse-item>
</template>

<style lang="scss" scoped>
</style>
